<template>
  <div class="flex-box wfull hfull">
    <slot></slot>
  </div>
</template>
<script setup lang="ts">
  import { ElScrollbar } from 'element-plus';

  defineProps<{
    flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse',
    flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse',
    justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly',
    alignItems?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch',
    alignContent?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around',
  }>()
</script>
<style lang="less" scoped>
  .flex-box {
    display: flex;
    flex-direction: v-bind(flexDirection); //row、row-reverse、column和column-reverse

    // wrap(换行)
    // nowrap(不换行)
    // wrap-reverse(行序反向)
    flex-wrap: v-bind(flexWrap);
    // flex-flow: v-bind(flexFlow); // flex-direction 和 flex-wrap 属性的复合属性
    
    // flex-start：子元素靠主轴起点对齐。
    // flex-end：子元素靠主轴终点对齐。
    // center：子元素居中对齐。
    // space-between：子元素在主轴上均匀分布，第一个子元素靠主轴起点，最后一个子元素靠主轴终点。
    // space-around：子元素在主轴上均匀分布，每个子元素两侧的距离相等。
    // space-evenly：子元素在主轴上均匀分布，两端与容器边缘的距离相等。
    justify-content: v-bind(justifyContent);

    // flex-start：子元素靠交叉轴起点对齐。
    // flex-end：子元素靠交叉轴终点对齐。
    // center：子元素居中对齐。
    // baseline：子元素的基线对齐。
    // stretch：子元素拉伸以填充整个容器的高度
    align-items: v-bind(alignItems);

    // flex-start
    // flex-end
    // center
    // stretch
    // space-between
    // space-around
    align-content: v-bind(alignContent);
  }
</style>